<template>
	<view class="account-container">
		<u-toast ref="uToast"></u-toast>
		<card @changeShowFlag="changeShowFlag" style="margin-bottom: 30rpx;" :indexData="indexData"></card>
<!-- 		<account-card v-if="indexData.typeAccountVoListMap.creditAccount && indexData.typeAccountVoListMap.creditAccount.length > 0" 
			:showFlag="showFlag" name="信用账户" :accountList="indexData.typeAccountVoListMap.creditAccount" @operate="operate"></account-card>
		<account-card v-if="indexData.typeAccountVoListMap.capitalAccount && indexData.typeAccountVoListMap.capitalAccount.length > 0" 
			:showFlag="showFlag" name="资金账户" :accountList="indexData.typeAccountVoListMap.capitalAccount" @operate="operate"></account-card>
		<account-card v-if="indexData.typeAccountVoListMap.investment && indexData.typeAccountVoListMap.investment.length > 0" 
			:showFlag="showFlag" name="投资" :accountList="indexData.typeAccountVoListMap.investment" @operate="operate"></account-card> -->
		<div v-for="(item, index) in indexData.accountOtherVoList" :key="index">
			<account-card v-if="indexData.accountOtherVoList[index].accountVoList && indexData.accountOtherVoList[index].accountVoList.length > 0"
				:showFlag="showFlag" :money="indexData.accountOtherVoList[index].money" :name="indexData.accountOtherVoList[index].name" :accountList="indexData.accountOtherVoList[index].accountVoList" @operate="operate"></account-card>
		</div>
		<view class="add-account-btn-container" @click="addAccount">
			<view class="add-account-btn-content">添加账户</view>
		</view>
		<!-- 账户分类组件弹框 -->
		<u-popup :show="showSelectedAccountFlag" :round="20" mode="bottom" @close="changeFlag('showSelectedAccountFlag', false)" @open="changeFlag('showSelectedAccountFlag', true)">
			<all-bank  @selectBank="selectBank" @closeBtn="changeFlag('showSelectedAccountFlag', false)" @selectAccount="selectAccount"></all-bank>
		</u-popup>
		<!-- 分类明细组件弹框 -->
		<u-popup :show="showAddAccountFlag" :round="20" mode="bottom" @close="changeFlag('showAddAccountFlag', false)" @open="changeFlag('showAddAccountFlag', true)">
			<add-account-detail :account="account" @callback="saveOrUpdate" @closeBtn="changeFlag('showAddAccountFlag', false)" ></add-account-detail>
		</u-popup>
		<!-- 双击账户后账户明细组件弹框 -->
		<u-popup :show="showBankDetailFlag" :round="20" mode="bottom" @close="changeFlag('showBankDetailFlag', false)" @open="changeFlag('showBankDetailFlag', true)">
			<bank-detail @closeBtn="changeFlag('showBankDetailFlag', false)" @editAccount="editAccount" :account="account" @showBillDetail="showBillDetail"></bank-detail>
		</u-popup>
		<!-- 双击账户后账户明细组件弹框 -->
		<u-popup :show="showBillDetailFlag" :round="20" mode="bottom" @close="changeFlag('showBillDetailFlag', false)" @open="changeFlag('showBillDetailFlag', true)">
			<bill-detail @closeBtn="changeFlag('showBillDetailFlag', false)" :bill="bill" @showCategory="changeFlag('showCategoryPopupFlag', true)"></bill-detail>
		</u-popup>
	</view>
</template>

<script>
	import card from './components/card/card.vue';
	import accountCard from './components/account-card/account-card.vue';
	import addAccountDetail from './components/add-account-detail/add-account-detail.vue';
	import allBank from './components/all-bank/all-bank.vue';
	import bankDetail from './components/bank-detail/bank-detail.vue';
	import billDetail from '@/components/bill-detail/bill-detail.vue';
	import categoryPopup from '@/components/category-popup/category-popup.vue';
	export default {
		components: {
			card, accountCard, addAccountDetail, allBank, bankDetail, billDetail, categoryPopup
		},
		data() {
			return {
				showFlag: true,															// 是否显示金额
				showSelectedAccountFlag: false,											// 显示选择银行卡
				showAddAccountFlag: false,												// 显示新增银行卡
				showBankIconFlag: false,												// 显示银行卡图标组件
				showBankDetailFlag: false,												// 显示账户明细组件
				showBillDetailFlag: false,												// 显示账单明细组件
				account: {},															// 账户
				bill: {},																// 账单（后面修改为遍历后的属性）
				indexData: {}															// 账户集合（根据类型分组后）
			}
		},
		onShow() {
			this.listenNetwork();
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			var that = this;
			console.log("下拉刷新");
			this.init(() => {
				that.successTips(that.$refs.uToast, "刷新成功", '');
				// uni.stopPullDownRefresh();
			});
			uni.stopPullDownRefresh();
		},
		methods: {
			/**
			 * 账户明细中点击编辑回调，弹出新增，并传值过去
			 */
			editAccount() {
				this.changeFlag('showBankDetailFlag', false);
				this.changeFlag('showAddAccountFlag', true);
			},
			/**
			 * 监听网络变化
			 */
			listenNetwork() {
				uni.onNetworkStatusChange(function(res) {
					let title = `您当前处于${res.networkType}网络，请您注意隐私安全`
					if(res.networkType=='none')title ='当前无网络连接'
					uni.showToast({
						title,
						icon: 'none'
					});
				});
			},
			/**
			 * 页面数据初始化，账户列表
			 */
			init(callback) {
				var that = this;
				that.$req.getAccountList().then(res => {
					if (callback) {
						callback();
					}
					if (!res.success) {
						that.errorTips(that.$refs.uToast, res.message, '');
					} else {
						this.indexData = res.data;
					}
				})
			},
			/**
			 * 删除账户
			 * @param {Object} id 账户id
			 */
			delete(id) {
				var that = this;
				this.confirm('警告', '确定删除吗', () => {
					that.$req.deleteAccount(id).then(res => {
						if(res.success && res.code == 40000) {
							that.successTips(that.$refs.uToast, "删除成功", '');
							setTimeout(() => {
								that.init();
								that.changeFlag('showAddAccountFlag', false);
								that.changeFlag('showSelectedAccountFlag', false);
							}, 1000)
						} else {
							that.errorTips(that.$refs.uToast, res.message);
						}
					})
				})
				
			},
			/** 双击账单最后回调
			 * @param {Object} item 账单对象
			 * @param {Object} index 账单索引
			 */
			showBillDetail(item, index) {
				this.bill = item;
				this.changeFlag('showBillDetailFlag', true);
			},
			/**
			 * 左滑后操作回调（包含修改，删除）
			 * @param {Object} item 点击的账户对象
			 * @param {Object} index 点击对应的账户集合索引
			 * @param {Object} option
			 */
			operate(item, index, option) {
				if (option && option.name == 'delete') {
					this.delete(item.id);
				} else if (option && option.name == 'edit') {
					// TODO 修改操作
					this.account = item;
					debugger
					this.changeFlag('showBankDetailFlag', true);
				}
			},
			saveOrUpdateCallback(res) {
				var that = this;
				debugger
				if(res.success && (res.code == 30000 || res.code == 20000)) {
					that.successTips(that.$refs.uToast, "操作成功", '');
					that.changeFlag('showAddAccountFlag', false);
					that.changeFlag('showSelectedAccountFlag', false);
					that.init();
				} else {
					that.msg(res.message);
				}
			},
			/**
			 * 新增账户
			 */
			saveOrUpdate(obj) {
				var that = this;
				that.account = JSON.parse(JSON.stringify(obj));
				if (that.account.id) {
					// 修改操作
					that.$req.updateAccount(that.account).then(res => {
						this.saveOrUpdateCallback(res);
						return;
					})
					return;
				}
				that.$req.insertAccount(that.account).then(res => {
					this.saveOrUpdateCallback(res);
				})
				// this.$refs.uToast.show({message: '成功', icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png', type: 'success'});
			},
			/** 点击图标事件的回调，这里要回调给index.vue来打开新的弹框
			 * @param {Object} index1 对应银行卡账户的下标（集合）
			 * @param {Object} index2 对应银行卡账户下标的集合下标（图标元素）
			 */
			selectBank(index1, index2) {
				// TODO 给对象赋值（根据下标，获取对应图标，颜色等数据）
				this.account.type = this.accountArr[index1].type;
				this.account.name = this.accountArr[index1].list[index2].name;
				this.account.icon = this.accountArr[index1].list[index2].icon;
				this.account.iconColor = this.accountArr[index1].list[index2].color;
				this.account.typeIndex = index1;
				this.account.iconIndex = this.calculateIndex(index1, index2);
				this.changeFlag('showAddAccountFlag', true);
			},
			calculateIndex(index1, index2) {
				if (index1 == 0) {
					return index2;
				} else {
					return index2 + (index1 - 1) * 4 + 7;
				}
			},
			/** 选择银行卡后回调
			 * @param {Object} index 索引
			 */
			selectAccount(index) {
				this.addAccountDetail = true;
			},
			 /**	切换是否显示新增账户弹窗
			  * @param {Object} name 组件flag名字
			  * @param {Object} flag 是否显示
			  */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/** 点击切换是否显示金额
			 * @param {Object} flag 是否显示金额
			 */
			changeShowFlag(flag) {
				this.showFlag = flag;
			},
			/**
			 * 点击添加账户回调
			 */
			addAccount() {
				// 将account设置为空，因为是新增
				this.account = {};
				this.showSelectedAccountFlag = true;
			}
		}
	}
</script>

<style  lang="scss">
	/* 设置背景颜色 */
	page {
		background-color: $themeColor;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 100vw;
		// min-height: calc(100vh - var(--status-bar-height));
	}

	.account-container {
		width: 100%;
		height: 100%;
		padding: 35rpx;
		box-sizing: border-box;

		// 添加账户按钮
		.add-account-btn-container {
			margin-top: 30rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.add-account-btn-content {
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;
				height: 80%;
				background-color: $themeYellowColor;
				color: $themePurpleColor;
			}
		}

	}

</style>
